import React from 'react';
import { useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import type { RootState } from '@/store';
import type { IRouter } from '@/router/router.d';
import {
  Header
  , Sidebar
} from './children';
import './index.scss';

const Layouts: React.FC = (prop) => {
  const { pathname } = useLocation();
  const flattenRouters: IRouter[] = useSelector((state: RootState) => state.global.flattenRouters)
  const route: IRouter | undefined = flattenRouters.find(item => item.path === pathname);
  const adaption: boolean = route && route.meta && route.meta.adaption === false ? false : true;

  return (
    <div className="hi-global-layout">
      <Header {...prop} />
      <div className="hi-global-main">
        <Sidebar />
        <section className="hi-layout-container">
          <main className={`hi-layout-content ${adaption?'self-adaption':''}`}>{prop.children}</main>
          {/* <footer className="hi-global-footer">
            <div className="hi-global-footer-copyright">Copyright©2021 哈工创想技术部出品</div>
          </footer> */}
        </section>
      </div>
    </div>
  )
}

export default Layouts;
